<template>
    <el-dialog v-model="editData.visible" :title="editData.title" center width="30%" top="10vh" :close-on-click-modal="false">
        <div class="dialog-content">
            <el-form :model="editData.form" label-width="auto" style="width:100%" ref="formRef" :rules="editData.rules">
                <el-row :gutter="50">
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                        <el-form-item label="用户头像" prop="avatarUrl">
                            <upload-img v-model="editData.form.avatarUrl" :aspect-ratio="1" mode="single"></upload-img>
                        </el-form-item>
                    </el-col>

                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                        <el-form-item label="用户名称" prop="nickname">
                            <el-input v-model="editData.form.nickname" placeholder="请输入用户名称" clearable/>
                        </el-form-item>
                    </el-col>

                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                        <el-form-item label="手机号码" prop="phone">
                            <el-input v-model="editData.form.phone" placeholder="请输入手机号码" clearable/>
                        </el-form-item>
                    </el-col>

                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                        <el-form-item label="用户性别" prop="sex">
                            <el-radio-group v-model="editData.form.sex">
                                <el-radio :label="1">男</el-radio>
                                <el-radio :label="2">女</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>

                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                        <el-form-item label="自评UTR" prop="utr">
                            <!--                            <el-input v-model="editData.form.utr" clearable placeholder="请输入自评UTR"/>-->
                            <el-select v-model="editData.form.utr" placeholder="请选择自评UTR">
                                <el-option v-for="item in utrOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                        <el-form-item label="openid" prop="openid">
                            <el-input v-model="editData.form.openid" :disabled="editData.type==='update'" clearable placeholder="请输入小程序openid"/>
                        </el-form-item>
                    </el-col>

                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                        <el-form-item label="启用状态" prop="status">
                            <el-switch v-model="editData.form.status"/>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="editData.visible = false">取消</el-button>
                <el-button type="primary" @click="submitForm">确定</el-button>
            </div>
        </template>
    </el-dialog>
</template>


<script setup>
import { nextTick, reactive, ref, computed, useTemplateRef } from 'vue'
import userApi from '@/api/model/platform-user.js'
import UploadImg from '@/components/comp-upload/upload-img.vue'

const emits = defineEmits(['update'])
defineExpose({ openDialog })

const utrOptions = computed(() => {
    const columns = []
    for (let i = 1; i <= 16.5; i += 0.5) {
        columns.push({
            label: i.toFixed(1),
            value: i.toFixed(1)
        })
    }
    return columns
})
const formRef = useTemplateRef('formRef')
const editData = reactive({
    type: 'add',
    visible: false,
    form: {
        id: '',
        openid: '',
        unionid: '',
        nickname: '',
        avatarUrl: '',
        phone: '',
        sex: 1,
        status: true,
        utr: ''
    },
    rules: {
        nickname: [
            { required: true, message: '请输入用户名称', trigger: 'blur' },
            { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
        ],
    }
})

/**
 * 打开弹框
 * @param type
 * @param item
 */
function openDialog (type, item) {
    editData.title = type === 'add' ? '新增用户' : '编辑用户'
    editData.visible = true
    editData.type = type
    editData.form.id = ''
    nextTick(() => {
        formRef.value.resetFields()
        if (type === 'update') {
            const { id, openid, unionid, nickname, avatarUrl, phone, sex, status, utr } = item || {}
            editData.form.id = id
            editData.form.openid = openid
            editData.form.unionid = unionid
            editData.form.nickname = nickname
            editData.form.avatarUrl = avatarUrl
            editData.form.phone = phone
            editData.form.sex = sex
            editData.form.status = status
            editData.form.utr = utr
        }
    })
}

/**
 * 提交表单
 */
function submitForm () {
    formRef.value.validate(async valid => {
        if (!valid) return
        editData.type === 'add' ? addItem() : updateItem()
    })
}

/**
 *  新增操作
 */
async function addItem () {
    const { code, data = [] } = await userApi.add.post({
        nickname: editData.form.nickname,
        avatarUrl: editData.form.avatarUrl,
        phone: editData.form.phone,
        status: editData.form.status,
        unionid: editData.form.unionid,
        openid: editData.form.openid,
        sex: editData.form.sex,
        utr: editData.form.utr
    })
    if (code === 200) {
        ElMessage.success('新增成功')
        editData.visible = false
        emits('update')
    } else {
        ElMessage.error('新增失败')
    }
}

/**
 *  更新操作
 */
async function updateItem () {
    const { code, data = [] } = await userApi.update.post({
        id: editData.form.id,
        nickname: editData.form.nickname,
        avatarUrl: editData.form.avatarUrl,
        phone: editData.form.phone,
        status: editData.form.status,
        unionid: editData.form.unionid,
        openid: editData.form.openid,
        sex: editData.form.sex,
        utr: editData.form.utr
    })
    if (code === 200) {
        ElMessage.success('编辑成功')
        editData.visible = false
        emits('update')
    } else {
        ElMessage.error('编辑失败')
    }
}
</script>

<style lang="less">
.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
    width: 100px;
    height: 100px;

    img {
        width: auto;
        height: 100%;
    }
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    text-align: center;
}
</style>